::-webkit-scrollbar{
    width: 8px;
    height: 8px;
    background-color: rgb(207, 217, 238);
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
  }
  ::-webkit-scrollbar:hover{
    background-color: #d1d1d1;
  }
  ::-webkit-scrollbar-thumb{
    // rgba(207, 217, 238, 0.6)
    background-color: rgba(107, 150, 241, 0.6);
    height: 50px;
    -webkit-border-radius:5px;
    border-radius:5px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
  }
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active{
    // rgba(207, 217, 238, 0.8)
    background-color:rgba(107, 150, 241, 0.8);
    border-right: 1px solid #f1f1f1;
    border-left: 1px solid #f1f1f1;
  }
  ::-webkit-scrollbar-track{
    background-color:#fff;
  }
  ::-webkit-scrollbar-track:hover{
    background-color:#fff;
  }